<template>
	<div class="deviceWrap">
		<StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
		<template v-else>
			<Tree
				class="tree"
				parentId="parentId"
				name="enterpriseName"
				children="children"
				id="id"
				:treeData="resData"
				@onChecked="handleChecked"
				@onSelected="handleSelected"
			></Tree>
			<GMap
				class="mapComponent"
				:checkedKeys="checkedKeys"
				:selectedKeys="selectedKeys"
				:mapData="mapData"
				name="enterpriseName"
				children="children"
				id="id"
				lngLat="lngLat"
			></GMap>
		</template>
	</div>
</template>

<script setup name="device">
import StatusTip from '@/components/StatusTip/index.vue';
import Tree from './components/tree/index.vue';
import GMap from './components/map/index.vue';
import res from './components/tree/data';
import { shallowRef, ref, onUnmounted, reactive } from 'vue';
const pageTip = reactive({
	show: true,
	status: 0
});
let resData = [];
let mapData = [];
const checkedKeys = ref([]);
const selectedKeys = ref([]);
/** 监听tree的勾选数据 */
const handleChecked = keys => {
	checkedKeys.value = keys;
};
/** 监听tree选中的数据 */
const handleSelected = keys => {
	selectedKeys.value = keys;
};
/** 扁平化数据 */
const generateFlat = (data, _children) => {
	const arr = [];
	for (let i = 0; i < data.length; i++) {
		const node = data[i];
		if (node[_children]) {
			let result = generateFlat(node[_children]);
			arr.push(...result);
		} else {
			arr.push(node);
		}
	}
	return arr;
};
setTimeout(() => {
	pageTip.show = true;
	let { code, data } = res;
	if (code == 200) {
		if (data?.length) {
			resData = data;
			mapData = generateFlat(data, 'children');
			pageTip.show = false;
		} else {
			pageTip.status = 1;
		}
	} else {
		pageTip.status = 2;
	}
}, 100);
</script>

<style lang="less" scoped>
.deviceWrap {
	display: flex;
	padding: 24px;
	height: 100%;
	.tree {
		width: 240px;
		margin-right: 24px;
	}
	.mapComponent {
		flex: 1;
	}
}
</style>
